<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="更换轮胎项目明细" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">

          <uni-forms-item label="旧轮胎行驶里程:" name="oldTyreMeligile" :required="boole">
            <text class="oldTyreMeligile"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.oldTyreMeligile" @change="changeAmount('oldTyreMeligile')"
                           placeholder="输入旧轮胎行驶里程"/>
            <text v-else> {{ ruleForm.oldTyreMeligile || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="是否调换备胎:" name="isReplaceSpareTire" :required="boole">
            <text class="isReplaceSpareTire"/>
            <uni-data-select v-if="boole" v-model="ruleForm.isReplaceSpareTire" :localdata="range"
                             placeholder="选择是否调换备胎" :clear="true" filterable/>
            <text v-else> {{
                ruleForm.isReplaceSpareTire == '1' ? '是' : ruleForm.isReplaceSpareTire == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="品牌:" name="tyreBrand" :required="boole">
            <text class="tyreBrand"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.tyreBrand" placeholder="请输入品牌"/>
            <text v-else> {{ ruleForm.tyreBrand || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="型号:" name="tyreModel" :required="boole">
            <text class="tyreModel"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.tyreModel" placeholder="请输入型号"/>
            <text v-else> {{ ruleForm.tyreModel || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="花纹:" name="tyreFigure" :required="boole">
            <text class="tyreFigure"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.tyreFigure" placeholder="请输入花纹"/>
            <text v-else> {{ ruleForm.tyreFigure || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="载重指数速度级别:" name="leadSpeedLevel" :required="boole">
            <text class="leadSpeedLevel"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.leadSpeedLevel" placeholder="请输入载重指数速度级别"/>
            <text v-else> {{ ruleForm.leadSpeedLevel || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="单价(含税):" name="unitPrice" :required="boole">
            <text class="unitPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.unitPrice"
                           @clear="clear('unitPrice')"
                           @change="changeAmount('unitPrice')"
                           placeholder="请输入输入单价(含税)"/>
            <text v-else> {{ ruleForm.unitPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="轮胎数量(条):" name="tyreNum" :required="boole">
            <text class="tyreNum"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.tyreNum"
                           @clear="clear('tyreNum')"
                           @change="changeAmount('tyreNum')"
                           placeholder="请输入轮胎数量(条)"/>
            <text v-else> {{ ruleForm.tyreNum || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="备注:" name="tyreRemark" :required="boole">
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490" v-model="ruleForm.tyreRemark" placeholder="请输入备注"/>
            <text v-else>{{ ruleForm.tyreRemark || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="上传附件:" name="annexUrl" :required="boole">
            <text class="annexUrl"/>
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.annexUrl"/>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>

  </view>
</template>

<script>
import {toNumberRide} from "@/pages/quota/libs/utils.js";

export default {
  name: "changeTireDetail", //更换轮胎项目明细
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {
    'value.unitPrice': {
      handler(val) {
        if (val) {
          this.handleCount()
        }
      },
      immediate: true,
      deep: true
    },
    'value.tyreNum': {
      handler(val) {
        if (val) {
          this.handleCount()
        }
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      range: [
        {value: "1", text: "是"},
        {value: "2", text: "否"},
      ],
      rules: {
        oldTyreMeligile: {
          rules: [
            {
              required: true,
              errorMessage: "请输入旧轮胎行驶里程",
              validateTrigger: "blur",
            },
          ],
        },
        isReplaceSpareTire: {
          rules: [
            {
              required: true,
              errorMessage: "请选择是否调换备胎",
              validateTrigger: "bind",
            },
          ],
        },
        tyreBrand: {
          rules: [
            {
              required: true,
              errorMessage: "请输入品牌",
              validateTrigger: "blur",
            },
          ],
        },
        tyreModel: {
          rules: [
            {
              required: true,
              errorMessage: "请输入型号",
              validateTrigger: "blur",
            },
          ],
        },
        tyreFigure: {
          rules: [
            {
              required: true,
              errorMessage: "请输入花纹",
              validateTrigger: "blur",
            },
          ],
        },
        leadSpeedLevel: {
          rules: [
            {
              required: true,
              errorMessage: "请输入载重指数速度级别",
              validateTrigger: "blur",
            },
          ],
        },
        unitPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入单价(含税)",
              validateTrigger: "blur",
            },
          ],
        },
        tyreNum: {
          rules: [
            {
              required: true,
              errorMessage: "请输入轮胎数量(条)",
              validateTrigger: "blur",
            },
          ],
        },
        totalPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入合计费用",
              validateTrigger: "blur",
            },
          ],
        },
        tyreRemark: {
          rules: [
            {
              required: true,
              errorMessage: "请输入备注",
              validateTrigger: "blur",
            },
          ],
        },
        annexUrl: {rules: [{required: true, errorMessage: "请上传附件", validateTrigger: "blur"}]},
      },
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (str === 'tyreFigure' || str === 'tyreNum') {
        msg = /^[1-9]\d*$/
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = ""
        } else {
          this.ruleForm[str] = this.ruleForm[str].toString().match(/^[1-9]\d*$/)[0]
        }
      } else {
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = ""
        } else {
          this.ruleForm[str] = this.ruleForm[str].toString().match(/^\d+(?:\.\d{0,2})?/)[0]
        }
      }
    },
    clear(str) {
      this.value[str] = this.ruleForm[str] = ''
      this.handleCount()
    },


    handleCount() {
      let num = toNumberRide(Number(this.ruleForm.unitPrice || 0), Number(this.ruleForm.tyreNum || 0))
      this.$set(this.value, 'maintenanceQuoter', num?.toString().match(/^\d+(?:\.\d{0,2})?/)[0])
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve();
            })
            .catch((err) => {
              let key = ".flex-col" + ">>>" + "." + err[0].key;
              reject(key);
            });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


